<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>毕业答辩</title>
    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css"/>
    <style type="text/css">
        .layui-upload-img {
            width: 80px;
            height: 80px;
            margin: 10px;
        }

        #img_show img {
            margin-left: 110px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md8 layui-col-md-offset2" style="min-height: 600px;">
            <form class="layui-form" action="" method="">

                <div class="layui-form-item">
                    <label class="layui-form-label">课程：</label>
                    <div class="layui-input-block">
                        <input type="text" id="jobName" name="courseName" class="layui-input"/>
                    </div>
                </div>
                <input type="hidden" name="courseImg" class="jobImg"/>
                <div class="layui-form-item">
                    <label class="layui-form-label">课程图标：</label>
                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-warm" id="test"><i
                                class="layui-icon layui-icon-upload-drag"></i>上传图片
                        </button>

                        <div class="layui-upload-list" id="img_show">
                            <!--img追加到这个div中-->
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">所属学校</label>
                    <div class="layui-input-block">
                        <select class="layui-input" id="companyId" name="school.schoolId" lay-ignore>
                            <option selected disabled>--------------------------------请选择---------------------------------</option>
                        </select>
                    </div>

                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">职位描述：</label>
                    <div class="layui-input-block">
								<textarea class="layui-textarea layui-hide" name="courseInfo"
                                          id="jobInfo"
                                          autocomplete="off"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" lay-submit lay-filter="addCourse">添加</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="../static/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../static/layui/layui.js" charset="utf-8"></script>
<script>
    $(function () {
        $.post('/school_project/school/selectAll', function (res) {
            console.log(res)
            for (var i = 0; i < res.length; i++) {
                $('#companyId').append('<option value="' + res[i].schoolId + '">' + res[i].schoolName + '</option>')
            }
        }, 'json');
    })
    layui.use(['layer', 'form', 'element', 'upload', 'layedit'], function () {
        var layer = layui.layer, form = layui.form, element = layui.element;
        var upload = layui.upload;
        var layedit = layui.layedit;

        var editIndex = layedit.build('jobInfo');
        form.render('select');
        upload.render({
            elem: '#test',
            url: '/school_project/lunbo/add',
            accept: 'images',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    var $img = $('<img/>');
                    $img.attr({
                        'src': result,
                        'alt': file.name,
                        'title': '点击删除',
                        'class': 'layui-upload-img'
                    });
                    // $('#demo1').attr('src', result); //图片链接（base64）
                    $img.click(function () {
                        // this 是一个js对象,是代表当前你点击的图片
                        //根据图片获取索引<div class="layui-upload-list" id="img_show"></div>
                        var img_index = $("#img_show img").index(this);
                        //删除自己
                        this.remove();
                        //从数组中移除此图片

                    });
                    $('#img_show').append($img);
                });
            },
            done: function (res) {
                if (res.code == 200) {
                    // multiple_images.push(res.data.src); //将上传成功的图片的地址,存入数组
                    $('.jobImg').val(res.src); //把数组的值显示在隐藏域中
                }
                //上传成功
            },
            error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html(
                    '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });


        //表单提交----------------------------------
        form.on('submit(addCourse)', function (data) {
            // 当前form的全部表单字段，名值对形式：{name: value}
            $.post('/school_project/course/insertCourse', data.field, function (res) {
                //res就是返回的结果
                console.log(res)
                if (res == 1) {
                    layer.confirm("添加成功", function () {
                        window.location.reload();
                    })
                }
            }, 'json');
            return false;
        });
    });
</script>

</body>
</html>
